<template>
  <div ref="pieChartRef" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, markRaw, defineProps } from "vue";
import * as echarts from "echarts";

// 接收参数
const props = defineProps({
  data: Array,
  title: String,
  position: Object,
  showLabel: {
    type: Boolean,
    default: false
  },
  showLegend: {
    type: Boolean,
    default: true
  }
});
const apiData = props.data;
const title = props.title;
const position = props.position;
const showLabel = props.showLabel;
const showLegend = props.showLegend;

// 图表绘制逻辑
const pieChartRef = ref<HTMLDivElement | null>(null);
const pieChartRefInstance = ref<echarts.ECharts | null>(null);
const initPieOption = ref<echarts.EChartOption>({});

let sum = apiData.reduce((cur, pre) => cur + pre.value, 0);
// eslint-disable-next-line vue/no-dupe-keys
let data: echarts.PieDataItem[] = [];
let legendData: string[] = [];
const color: string[] = [
  "#1296db",
  "#ffe000",
  "#7cba59",
  "#00ffff",
  "#ffa800",
  "#409B5C",
  "#ff5b00"
];

for (let i = 0; i < apiData.length; i++) {
  const name = `${apiData[i].name} : ${apiData[i].value}`;
  legendData.push(name);
  data.push({
    value: apiData[i].value,
    name,
    itemStyle: {
      borderWidth: 0,
      borderRadius: 5,
      shadowBlur: 10,
      borderColor: color[i],
      shadowColor: color[i]
    }
  });
}

const seriesOption: echarts.PieSeriesOption = [
  {
    name: "分布图",
    type: "pie",
    clockwise: false,
    radius: position.radius,
    center: position.pie,
    emphasis: {
      scale: true
    },
    label: {
      show: showLabel,
      color: "#6a6a6a",
      fontSize: 13,
      formatter: "{b} %"
    },
    data
  }
];

initPieOption.value = {
  title: {
    text: title,
    subtext: title ? sum.toString() : "",
    textStyle: {
      color: "#19E1E3",
      fontSize: 18
    },
    subtextStyle: {
      color: "#6a6a6a",
      fontSize: 18,
      fontStyle: "oblique",
      fontWeight: "500"
    },
    x: "18%",
    y: "38%"
  },
  color,
  tooltip: {
    show: true,
    // backgroundColor: "rgba(13, 64, 71, 0.95)",
    // borderColor: "rgba(143, 225, 252, 0.85)",
    padding: 8,
    formatter: function (params) {
      return `<p style="color: ${params.color}">${params.name} %</p>`;
    }
  },
  legend: {
    show: showLegend,
    itemWidth: 16,
    itemHeight: 8,
    itemStyle: {
      borderWidth: 3
    },
    orient: "vertical",
    data: legendData,
    right: position.legend,
    top: "center",
    align: "left",
    itemGap: 10,
    textStyle: {
      color: "#6a6a6a",
      fontSize: 12
    }
  },
  toolbox: {
    show: true
  },
  series: seriesOption
};

const initPieChart = () => {
  if (pieChartRef.value) {
    pieChartRefInstance.value = markRaw(echarts.init(pieChartRef.value));
    pieChartRefInstance.value.setOption(initPieOption.value, true);
  }
};

// 挂载后动作 -- 初始化图表
onMounted(() => {
  initPieChart();
  // 图表自适应
  window.addEventListener("resize", () => {
    if (pieChartRefInstance.value) {
      pieChartRefInstance.value.resize();
    }
  });
});

// 销毁前动作 -- 销毁图表
onBeforeUnmount(() => {
  if (pieChartRefInstance.value) {
    pieChartRefInstance.value.dispose();
  }
});
</script>

<style scoped lang="scss"></style>
